// CanvasImage class - CanvasImage element for scene - draws and manages an image in the scene
CanvasImage.prototype = new Shape();  
CanvasImage.prototype.constructor=CanvasImage;
function CanvasImage(x, y, w, h, src){
	this.x = x;
	this.y = y;
	this.w = w;
	this.h = h;
	
	if(typeof(src)=="object"){
		this.img = src;
		this.loaded =true;
		this.updateBoundary();
	}
	else{	
		this.url = src;
		this.img = new Image();
		this.loaded = false;
		// set up the image
		var self = this;
		this.img.onload = function(){
			self.loaded = true;
			self.updateBoundary();
		}
		this.img.src = this.url;
	}
	var self = this;
	this.type="img";
	this.allowMouseEventsOnTransparent = false;
	
	// overrite allowMouseEvents to allow for disabling mouse events on transparent points
	this.allowMouseDownEvent = function(pos){
		if(!this.allowMouseEvents()) return false;
		if(!this.allowMouseEventsOnTransparent){
			// check if mouse is on a transparent point
			// we do not allow drag on transparent pixels if allowMouseEventsOnTransparent is false			
			try{
				var ctx = this.scene.context;				
				// get mouse pos offset
				var ox = pos.x - this.x;
				var oy = pos.y - this.y;
				if(ox<=this.w && oy<=this.h){					
					// mouse event is inside the image
					var bgPixel = {r:0,g:0,b:0,a:0};
					var imgPixel = {r:0,g:0,b:0,a:0};
					var	pointStartIndex = ox*imgData.width*4 + oy*4;
					//delete image
					this.scene.invalidate({shape:this});
					// get pixel value without image
					var imgData=ctx.getImageData(this.x,this.y,this.w,this.h);																			
					bgPixel={r:imgData.data[pointStartIndex + 0],g:imgData.data[pointStartIndex + 1],b:imgData.data[pointStartIndex + 2],a:imgData.data[pointStartIndex+3]};					

					// redraw image
					this.invalidate();
					// get pixel value with image
					imgData=ctx.getImageData(this.x,this.y,this.w,this.h);											
					imgPixel={r:imgData.data[pointStartIndex + 0],g:imgData.data[pointStartIndex + 1],b:imgData.data[pointStartIndex + 2],a:imgData.data[pointStartIndex+3]};										
					// check if pixels match
					if(imgPixel.r==bgPixel.r && imgPixel.g==bgPixel.g && imgPixel.b==bgPixel.b && imgPixel.a==bgPixel.a || imgPixel.a==0){
						return false;
					}
					else return true;
				}
				else return false;
			}
			catch(e){
				// image is from another server, or it is tested locally (from file system), getImageData is not available, so we must reset allowMouseEventsOnTransparent
				this.allowMouseEventsOnTransparent = true;
				console.log("Ignoring transparent pixels only works for same domain images.");
				return true;
			}
		}
		else return true;
	}
	
	this.draw = function(ctx){
		// if the image is loaded, we can draw it, if not, we need to wait until it is loaded		
		if(this.loaded){
			ctx.beginPath();
			ctx.drawImage(this.img, this.x, this.y, this.w, this.h);			
			this.executeDraw(ctx);
		}
		else{
			var self = this;
			setTimeout(function(){
				self.draw(ctx);
			},50);
		}
	};
}
